<template>
  <dt-modal-info ref="info" title="回款详情" :width="550">
    <Row>
      <Col span="12">
        <p class="item">
          <label>所属组织：</label>
          <span>{{ info.caseLocationTwo }}</span>
        </p>
      </Col>
      <Col span="12">
        <p class="item">
          <label>案场名称：</label>
          <span>{{ info.housesName }}</span>
        </p>
      </Col>
      <Col span="12">
        <p class="item">
          <label>回款金额：</label>
          <span>{{ info.backAmount }}元</span>
        </p>
      </Col>
      <Col span="12">
        <p class="item">
          <label>回款日期：</label>
          <span>{{ info.backDate || '-' }}</span>
        </p>
      </Col>
      <Col span="12">
        <p class="item">
          <label>核销状态：</label>
          <span>{{ $dt.dictInfo().__value('WriteOffStatus', info.status) }}</span>
        </p>
      </Col>
      <Col span="12">
        <p class="item">
          <label>待销金额：</label>
          <span>{{ info.waitWriteOffAmount }}元</span>
        </p>
      </Col>
      <Col span="12">
        <p class="item">
          <label>已销金额：</label>
          <span>{{ info.writeOffAmount }}元</span>
        </p>
      </Col>
      <Col span="12">
        <p class="item">
          <label>关联结算单：</label>
          <span>{{ info.settlement.length ? info.settlement.join('、') : '-' }}</span>
        </p>
      </Col>
      <Col span="24" style="display: flex;">
        <p class="item" >
          <label>回单附件：</label>
          <div style="flex: 1;">
            <a v-for="(item, idx) in info.attaches" @click="onFile(item)" style="margin-right: 10px;">
             {{ item.fileName ?? '-' }}
            </a>
          </div>
          <span v-if="!(info.attaches?.length > 0)">-</span>
        </p>
      </Col>
      <Col span="24">
        <p class="item">
          <label>备注：</label>
          <span>{{ info.remark ?? '-' }}</span>
        </p>
      </Col>
    </Row>
  </dt-modal-info>
</template>

<script>
  import paymentMgr from '@/biz/commission/payment.js'
  import toolMgr from '@/biz/base/tool.js'

  export default {
    data() {
      return {
        visible: false,
        info: {
          settlement: []
        }
      }
    },
    methods: {
      getDetail() {
        paymentMgr.detail(this.info.backId).then((res) => {
          this.info.settlement = res
        })
      },
      create(info) {
        this.info = {
          ...info,
          settlement: [],
          backAmount: this.$tool.formatterMoney(info.backAmount),
          waitWriteOffAmount: this.$tool.formatterMoney(info.waitWriteOffAmount),
          writeOffAmount: this.$tool.formatterMoney(info.writeOffAmount)
        }
        this.getDetail()
        this.show()
      },
      show() {
        this.$refs.info.show()
      },
      hide() {
        this.$refs.info.hide()
      },
      onFile(file) {
        toolMgr.downloadFile(file.attachAddress, file.fileName)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .item {
    display: flex;
    margin-bottom: 10px;

    label {
      width: 90px;
      text-align: right;
    }
    span {
      flex: 1;
    }
  }
</style>
